<template>
	<view class="helang-tab-bar">
		<view class="placeholder" v-if="fixedBottom"></view>
		<view class="bar h-flex-x h-flex-4" :class="{'fixed':fixedBottom}">
			<view class="item" v-for="(item,index) in  tabList" :key="index" :class="{
					'active':currents == index,
					'recover':((prevIndex>=0?true:false)&& prevIndex== index)
				}" @click="change(index)">
				<view>
					<view class="h-flex-x h-flex-center">
						<image class="tabIcon" :src="item.icon"></image>
					</view>
					<view class="h-flex-x h-flex-center">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 翻滚
		name: "helangTabBarRoll",
		props: {
			fixedBottom: {
				type: Boolean,
				default: true
			},
			currents: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				prevIndex:uni.getStorageSync('prevIndex'),
				current: 0,
				tabList: [{
						"icon": "../../static/tab/tab1.png",
						"text": "首页"
					},
					{
						"icon": "../../static/tab/tab2.png",
						"text": "附近"
					},
					{
						"icon": "../../static/tab/tab3.png",
						"text": "新闻"
					},
					{
						"icon": "../../static/tab/tab4.png",
						"text": "购物车"
					},
					{
						"icon": "../../static/tab/tab5.png",
						"text": "我的"
					},
				]
			};
		},
		watch: {
		    current: {
		        handler (newName, oldName) {
					uni.setStorageSync('prevIndex',this.currents)
		        },
		        immediate: true
		    }
		},
		methods: {
			change(index) {
				console.log(index,'000000000')
				if(uni.getStorageSync('prevIndex')!=index){
					this.current=index
					if (index == 0) {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else if (index == 1) {
						uni.reLaunch({
							url: '/pages/vicinity/vicinity'
						})

					} else if (index == 2) {
						uni.reLaunch({
							url: '/pages/news/index'
						})
					}else if(index == 3){
						uni.reLaunch({
							url: '/pages/cat/cat'
						})
					}else {
						uni.reLaunch({
							url: '/pages/personal/index'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/helang-flex.scss";
	@import "@/static/css/tab-bar.scss";

	.helang-tab-bar {
		padding-bottom: 40rpx;
		z-index: 999;

		.item {
			height: 100rpx;
			position: relative;
			overflow: hidden;
			border-top: 1rpx #ccc solid;

			>view {
				height: 200%;

				>view {
					height: 50%;
					color: $color1;
					font-size: 30rpx;
				}
			}

			&.active {
				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 90rpx;
					height: 90rpx;
					box-sizing: border-box;
					border-color: #000;
					border-style: solid;
					border-width: 2px;
					border-radius: 50%;
					top: 5rpx;
					left: 50%;
					margin-left: -45rpx;
					z-index: 1;

					animation: scale 0.3s ease 0s 1 normal;
					animation-fill-mode: forwards;
				}

				&::after {
					content: '';
					display: block;
					background-color: $color1;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					position: absolute;
					bottom: 3px;
					left: 50%;
					margin-left: -2px;
					z-index: 2;
					opacity: 0;

					animation: fide-in 0.5s ease 0.3s 1 normal;
					animation-fill-mode: forwards;
				}

				>view {
					animation: translate 0.4s ease 0.3s 1 normal;
					// transform:translateY(-100rpx);
					animation-fill-mode: forwards;
				}
			}

			&.recover {
				>view {
					animation: recover 0.3s ease 0s 1 normal;
				}
			}
		}
	}

	// 恢复默认
	@keyframes recover {
		from {
			transform: translateY(-100rpx);
		}

		to {
			transform: translateY(0);
		}
	}

	// 转换移动
	@keyframes translate {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-100rpx);
		}
	}

	// 圆圈缩放
	@keyframes scale {
		0% {
			transform: scale(0, 0);
			opacity: 0;
			border-width: 2px;
		}

		50% {
			opacity: 0.5;
			border-width: 5px;
		}

		100% {
			transform: scale(0.95, 0.95);
			opacity: 0;
			border-width: 0px;
		}
	}

	// 淡入
	@keyframes fide-in {
		from {
			transform: scale(0, 0);
			opacity: 0;
		}

		to {
			transform: scale(1, 1);
			opacity: 1;
		}
	}
	.tabIcon{
		width: 56upx;
		height: 56upx;
	}
</style>
